<template>
  <div class="index" @mousedown="handlemovewindow" @mouseleave="handleremovewindow" :style="`transform:scale(${windowScale}) translate(${windowTranslatex}px,${windowTranslatey}px)`">
    <div class="content">
      <div class="calend">
        <div class="top">
          <el-button size="mini" @click="goToPrevYear"><i class="el-icon-arrow-left" ></i></el-button>
          <dd class="boxtop">{{ currentYear }} 年
            <el-date-picker
              class="currentyear"
              v-model="selectvalue"
              @change="setCurrentYear"
              type="year"
              placeholder="选择年">
            </el-date-picker></dd>
          <el-button size="mini" @click="goToNextYear"><i class="el-icon-arrow-right"></i></el-button>
          <dd class="width20"></dd>
          <el-button size="mini" @click="goToPrevMonth"><i class="el-icon-arrow-left"></i></el-button>
          <dd class="boxtop boxtop2">{{ currentMonth }} 月
            <el-select class="currentyear" v-model="currentMonth" @change="setCurrentMonth" placeholder="请选择">
              <el-option
                v-for="(item, i) in monthlist"
                :key="i"
                :label="item.lable"
                :value="item.value">
               </el-option>
            </el-select></dd>
          <el-button size="mini" @click="goToNextMonth"><i class="el-icon-arrow-right"></i></el-button>
          <el-button size="mini" class="btn" @click="setWindowTop(true)" v-if="!isOnTop">置顶关</el-button>
          <el-button size="mini" class="btn" @click="setWindowTop(false)" v-else>置顶开</el-button>
          <el-button size="mini" class="btn hotkeyclose" @click="closeWindow">设置快捷键ctrl+{{ closeKey }}</el-button>
          <el-button size="mini" class="btn" @click="exportJson">备份.json</el-button>
          <el-button size="mini" class="btn" @click="exportTxt">备份.txt</el-button>
          
          <el-button size="mini" class="btn export">加载
            <input type="file" name="" id="file" accept="application/json" @change="insertJsonElement">
          </el-button>
          
        </div>
        <div class="week">
          <div class="flex">
            <dl><span>SUN</span>周日</dl>
            <dl><span>MON</span>周一</dl>
            <dl><span>TUE</span>周二</dl>
            <dl><span>WED</span>周三</dl>
            <dl><span>THU</span>周四</dl>
            <dl><span>FRI</span>周五</dl>
            <dl><span>SAT</span>周六</dl></div>
        </div>
        <el-calendar id="calendar" ref="calendar" :firstDayOfWeek="7" v-model="value">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{date, data}">
            <!--自定义内容-->
            <div @click="handleDateChange(date,data)" class="height100" :class="{ sunday: isSunday(date, data) }" @contextmenu.prevent="opencmenu($event,date,data)">
              <div class="calendar-day" :class="{ festival: isRestDay(date, data) }">
                <span class="day1">{{ data.day.split('-').slice(2).join('-') }}</span>
                <span>{{ solarToLunar(date, data) }}</span>
                <span class="rest" v-if='isRestDay(date, data)'>休</span>
                <span class="rest work" v-if='isWorkDay(date, data)'>班</span>
              </div>
              <div class="tiplist">
                 <div v-for="(item, i) in calendarData" :key="i">
                      <div v-if="item.year == data.day.split('-')[0] && (item.months).indexOf(data.day.split('-').slice(1)[0]) != -1">
                          <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-')) != -1">
                              <div class="item" effect="dark" placement="right">
                                  <div class="is-selected" :class="`editori${i}`" :contenteditable="contenteditable" @dblclick="editstate($event,i)" @blur="editInfoIndex($event, { text: $event.target.innerText, id: item.id })" @contextmenu.prevent="showdel($event, item)">{{ item.things }}</div>
                              </div>
                          </div>
                        <div v-else></div>
                      </div>
                      <div v-else></div>
                 </div>
              </div>
              
            </div>
          </template>
        </el-calendar>
      </div>
      <div class="infolist">
        <right :info="info" :selectday="seclectday" :currentWeek="currentWeek" @editInfo="editInfo" @delitem="delitem" />
      </div>
    </div>
    // <div class="copyright">
    //   <div>
    //     <span>画扇小日历</span>
    //       版权归上海画扇网络科技有限公司所有，请勿抄袭和修改
    //   </div>
    //   <div>
    //     <img src="../../assets/logo.png" width="26" alt="">
    //      上海画扇网络科技有限公司
    //   </div>
      
    // </div>
    <el-card class="menu" v-if="showmenu" :style="`left:${left}px;top:${top}px`">
      <div class="item" @click="addcontent">添加备注</div>
    </el-card>
    <el-card class="menu addcont" v-if="addcontdialog" :style="`left:${left}px;top:${top}px`">
        <el-input type="textarea" v-model="addconttext"></el-input>
        <el-button class="btn" size="small" @click="submitcont">添加</el-button>
    </el-card>
    <el-card class="menu del" v-if="showdelbbool" :style="`left:${left}px;top:${top}px`">
        <div class="item" @click="delitem">删除</div>
    </el-card>
  </div>
</template>
 
<script>
import calendar from '@/utils/calendar.js'
import right from './right.vue'
import { saveAs } from 'file-saver'
import { ipcApiRoute } from '@/api/main'
import {nanoid} from 'nanoid'
export default {
  name: "calendar",
  components: {
    right,
    
  },
  data() {
    return {
      calendarData: [
        { id:'1', year: '2023', months: ['07', '11'], days: ['15'], things: `1:10点有面试` },
        { id: '2', year: '2023', months: ['10', '11'], days: ['02'], things: '去公园野炊' },
        { id: '3', year: '2023', months: ['07'], days: ['15'], things: '看星星' },
        { id: '4', year: '2023', months: ['11'], days: ['02'], things: '看月亮' }
      ],
      value: new Date(),
      selectvalue: new Date(),
      currentYear:(new Date()).getFullYear(),
      currentMonth: (new Date()).getMonth() + 1,
      currentWeek: (new Date()).getDay(),
      monthlist: calendar.monthList,
      info: [],
      seclectday: (new Date()).getFullYear() +"-"+((new Date()).getMonth() + 1)+"-"+ (new Date()).getDate(),
      left: 0,
      top: 0,
      showmenu:false,
      showdelbbool: false,
      addcontdialog:false,
      addconttext: '',
      currentdelitem: undefined,
      isOnTop: false,
      closeKey: this.$store.state.app.closekey,
      keybordcontrol: false,
      keybordshift:false,
      scalewindow: 10,
      currentDate: '',
      currentData: '',
      windowScale: 1,
      windowTranslatex: 0,
      windowTranslatey: 0,
      contenteditable: false,
      hotkeystate: false,
      movewindowstate: false
    }
  },
 
  mounted() {
    if(!localStorage.getItem('countdown')) {
      localStorage.setItem('countdown', new Date())
    }
    document.addEventListener('click',($event)=>{
      // $event.stopPropagation()
      this.closeModal($event)
    })
    if(localStorage.getItem('messageList')){
      this.calendarData = JSON.parse(localStorage.getItem('messageList'))
    }
    document.addEventListener('keydown',(e)=> {
      console.log(e)
        const { ctrlKey, shiftKey, altKey, metaKey } = e
        const ctrlOrMetaKeyActive = ctrlKey || metaKey
        if (ctrlOrMetaKeyActive && e.key == this.closeKey) {  //快捷键关闭窗口
          this.$ipc.send('shortcut-triggered', e.key)
          // this.closeCurrentWindow()
        }
        if (ctrlOrMetaKeyActive && e.key == 'k') {  //快捷键open窗口
          this.openCurrentWindow()
        }
        
        if(shiftKey && !this.keybordshift) {  //
          this.keybordshift = true
        }
        if (ctrlOrMetaKeyActive && !this.keybordcontrol) {
          this.keybordcontrol = true
        }
    })
    document.addEventListener('keyup', (e) => {
        this.keybordcontrol = false
        this.keybordshift = false
        this.hotkeystate = false
    })
    let obj = {
      width: 1200,
      height: 700,
    }
    document.addEventListener('DOMMouseScroll', (e) => {
      if(e.shiftKey) {
        if (e.wheelDelta > 0) {
          this.windowScale += 0.03
        }
        if (e.wheelDelta < 0) {
          this.windowScale -= 0.03
        }
      }
      if (this.keybordcontrol) {
        if (e.deltaY > 0) {
          obj.width += 12
          obj.height += 5
        }
        if (e.deltaY < 0) {
          obj.width -= 12
          obj.height -= 5
        }
        this.throttled(this.setWindowSize(obj), 500)
      }
    })
    document.addEventListener('wheel', (e) => {
      if (e.shiftKey) {
        if (e.wheelDelta > 0) {
          this.windowScale += 0.03
        }
        if (e.wheelDelta < 0) {
          this.windowScale -= 0.03
        }
      }
      if (this.keybordcontrol) {
        if (e.deltaY > 0) {
          obj.width += 12
          obj.height += 5
        }
        if (e.deltaY < 0) {
          obj.width -= 12
          obj.height -= 5
        }
        this.throttled(this.setWindowSize(obj), 500)
      }
    })
   // document.addEventListener()
    let odiv = document.querySelector('.index')
    odiv.removeEventListener('mouseup', this.handlemovewindow)
  },
 
  watch: {
    '$store.state.app.closekey': function (newVal) { // plan1.0
      if (newVal) {
        this.closeKey = `${this.$store.state.app.closekey}`
      }
    },
    '$store.state.app.slides': function (newVal) {
      if (newVal) {
        this.calendarData = newVal
      }
    },
    'value':function(val) {
      this.selectvalue = val
      this.currentYear = val.getFullYear()
      this.currentMonth = val.getMonth() + 1
    }
  },
  methods: {
    editstate(e,i) {
      this.contenteditable = true
      console.log(document.querySelector('.editori'+i),'0-0-0')
      setTimeout(()=>{
        document.querySelector('.editori' + i).focus()
      },100)
    },
    handleremovewindow() {
      let odiv = document.querySelector('.index')
      odiv.removeEventListener('mousemove', this.handlemovewindow)
      this.movewindowstate = false
    },
    handlemovewindow($event) {
      let swidth = window.screen.width
      let sheight = window.screen.height
      this.movewindowstate = true
      if(!this.movewindowstate) return
      let x = $event.pageX - this.windowTranslatex
      let y = $event.pageY - this.windowTranslatey

      let movefun = (e) => {
        this.windowTranslatex = e.pageX - x
        this.windowTranslatey = e.pageY - y
      }
      let odiv = document.querySelector('.index')
      if ($event.button == 1 && this.movewindowstate) {  //鼠标中键
        odiv.style.cursor = 'move'
        odiv.addEventListener('mousemove', movefun)
      } else {
        odiv.style.cursor = 'auto'
        odiv.removeEventListener('mousemove', movefun)
      }
      odiv.addEventListener('mouseleave', (e) => {
        document.querySelector('.index').style.cursor = 'auto'
        odiv.removeEventListener('mousemove', movefun)
        this.movewindowstate = false
      })
      odiv.addEventListener('mouseup', (e) => {
        document.querySelector('.index').style.cursor = 'auto'
        odiv.removeEventListener('mousemove', movefun)
        this.movewindowstate = false
      })
    },
    throttled(fn, delay) {
      let timer = null
      let starttime = Date.now()
      return function () {
        let curTime = Date.now() // 当前时间
        let remaining = delay - (curTime - starttime)  // 从上一次到现在，还剩下多少多余时间
        let context = this
        let args = arguments
        clearTimeout(timer)
        if (remaining <= 0) {
          fn.apply(context, args)
          starttime = Date.now()
        } else {
          timer = setTimeout(fn, remaining);
        }
      }
    },
    setWindowSize(obj) {
      this.$ipc.invoke(ipcApiRoute.setWindowSize,{width: obj.width, height: obj.height}).then(result => {
        console.log(result, 'result')
      })
    },
    hotkeyclose(e) {
      if(this.hotkeystate) {
        this.closeKey = e.key
        this.$store.dispatch('app/setCloseKey', e.key)
        console.log(this.$store.state.app.closekey)
      }
    },
    closeWindow() {
      this.hotkeystate = true
      document.addEventListener('keydown', this.hotkeyclose)
    },
    openCurrentWindow() {
      this.$ipc.invoke(ipcApiRoute.openWindow).then(result => {
        console.log(result, 'result')
      })
    },
    closeCurrentWindow() {
      this.$ipc.invoke(ipcApiRoute.closeWindow).then(result => {
        console.log(result, 'result')
      })
    },
    setWindowTop(bool) {
      this.isOnTop = bool
      this.$ipc.invoke(ipcApiRoute.alwaysOnTop,bool).then(result => {
        console.log(result, 'result')
      })
    },
    insertJsonElement(files) {
      console.log(files.target.files[0])
      const reader = new FileReader()  //
      reader.readAsText(files.target.files[0])  //
      reader.onload = e => {
        if (e.target) {
          const json = JSON.parse(JSON.stringify(e.target.result))
          // console.log(json)
          //todo
          this.calendarData = JSON.parse(json)
          this.$message.success('导入成功')
        }
      }
    },
    exportJson() {
      const blob = new Blob([JSON.stringify(this.calendarData)], { type: '' })
      saveAs(blob, 'rilidata.json')
    },
    exportTxt() {
      let html = ''
      this.calendarData.map(item => {
        let date = item.year + "-" + item.months[0] + "-" + item.days[0]
        let it = `'日期:'${date}
         '备注:'${item.things}
         `
        html += it
      })
      const blob2 = new Blob([html], { type: '' })
      saveAs(blob2, 'rilidata.txt')
    },
    goToPrevMonth() {
      // 自定义上个月按钮的操作
      this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      // this.$refs.calendar.chageValue(this.value);
      this.currentMonth = this.value.getMonth() + 1
    },
    setCurrentYear() {
        this.value = new Date(this.value.setFullYear(this.selectvalue.getFullYear()));
        this.currentYear = this.value.getFullYear()
    },
    setCurrentMonth() {
      this.value = new Date(this.value.setMonth(this.currentMonth - 1));
      this.currentMonth = this.value.getMonth() + 1
    },
    goToNextMonth() {
      // 自定义下个月按钮的操作
      this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      // this.$refs.calendar.chageValue(this.value);
      this.currentMonth = this.value.getMonth() + 1

    },
    goToNextYear() {
      this.value = new Date(this.value.setFullYear(this.value.getFullYear() + 1));
      // this.$refs.calendar.chageValue(this.value);
      this.currentYear = this.value.getFullYear()
    },
    goToPrevYear() {
      this.value = new Date(this.value.setFullYear(this.value.getFullYear() - 1));
      // this.$refs.calendar.chageValue(this.value);
      this.currentYear = this.value.getFullYear()

    },
    submitcont() {
      if(this.addconttext == '') {
        return
      }
      this.calendarData.push({
        id: nanoid(5),
        year: this.seclectday.split('-')[0],
        months:[this.seclectday.split('-')[1]],
        days:[this.seclectday.split('-')[2]],
        things: this.addconttext
      })
      this.addcontdialog = false
      this.addconttext = ''

      this.handleDateChange(this.currentDate, this.currentData)
      localStorage.setItem('messageList', JSON.stringify(this.calendarData))
      this.$store.dispatch('app/setSlides', this.calendarData)

    },
    addcontent() {
      this.addcontdialog=true
      this.showmenu = false
    },
    closeModal(event) {
      // 如果点击的是弹框内容区域，则不执行关闭弹框的逻辑
      if (event.target.classList.contains('item')) {
        return;
      }
      this.showmenu = false;
      this.showdelbbool = false

    },
    editInfoIndex($event,obj) {
      this.contenteditable = false
      this.editInfo(obj)
      this.info.map(item => {
        if(item.id == obj.id) {
          item.things = $event.target.innerText
        }
      })
      // console.log(this.info,'info')
    },
    editInfo(obj) {
      this.calendarData.map((item,index,arr) => {
         if(item.id == obj.id) {
           item.things = obj.text
         }
      })
      localStorage.setItem('messageList', JSON.stringify(this.calendarData))
      this.$store.dispatch('app/setSlides', this.calendarData)
    },
    delitem(id) {
      this.calendarData.map((item,i,arr) => {
        if(item.id == id){
          arr.splice(i,1)
        }
      })
      localStorage.setItem('messageList', JSON.stringify(this.calendarData))
      this.$store.dispatch('app/setSlides', this.calendarData)


    },
    showdel(e,item) {
      if (!e.target.classList.contains('item')) {
        return;
      }
      this.currentdelitem = item
      this.showmenu = false
      this.showdelbbool = true
      this.left = e.x
      this.top = e.y
    },
    opencmenu(e,date,data) {
      this.currentDate = date
      this.currentData = data
      this.showdelbbool = false
      this.left=e.x
      this.top=e.y
      this.showmenu = true
      this.value = data.day
      this.handleDateChange(date,data)
    },
    filterCurrentThings(date) {
      let year = date.day.split('-')[0]
      let month = date.day.split('-')[1]
      let day = date.day.split('-')[2]
      let hasThing = this.calendarData.filter((item) => {
        return (item.year == year && item.months.includes(month) && item.days.includes(day))
      })
      return hasThing
    },
    handleDateChange(data,date) {
      this.info = []
      let year = date.day.split('-')[0]
      let month = date.day.split('-')[1]
      let day = date.day.split('-')[2]
      this.seclectday = date.day
      this.currentWeek = data.getDay()
      let hasThing = this.calendarData.filter((item) => {
        return (item.year == year && item.months.includes(month) && item.days.includes(day))
      })
      
      if(hasThing.length == 0) {
        this.info = []
        return
      }
      hasThing.map((item) => {
        this.info.push({things: item.things, id:item.id })
      })
    },
    addNote() {
      // 处理添加备注事件
      console.log('添加的备注:', this.note);
      // 在这里可以将备注保存到数据库或其他地方
    },
    // 是否选中日期
    isSelected: function (slotDate, slotData) {
      return this.selectedDates.includes(slotData.day)
    },
    // 是否调班日
    isWorkDay(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      return calendar.workorrest.workday.some(item => {
        return item == solarDayArr.slice(1).join('-') && solarDayArr[0] == '2023'
      })
    },
    // 是否休息日
    isRestDay(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      return calendar.workorrest.restday.some(item=>{
        return item == solarDayArr.slice(1).join('-') && solarDayArr[0] == '2023'
      })
    },
    // 是否周六日
    isSunday(slotDate, slotData) {
       return slotDate.getDay() == 0 || slotDate.getDay() == 6
    },
    // 是否节假日
    isFestival(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')

      return festAndTerm != ''
    },
    // 公历转农历
    solarToLunar(slotDate, slotData) {
      let solarDayArr = slotData.day.split('-');
      let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

      // 农历日期
      let lunarMD =  lunarDay.IDayCn

      // 公历节日\农历节日\农历节气
      let festAndTerm = [];
      festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
      festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
      festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
      festAndTerm = festAndTerm.join('')

      return festAndTerm == '' ? lunarMD : festAndTerm
    }
  }

}
</script>
<style>
body,.el-calendar {
  background: rgb(250,250,240);
}
body {
  line-height: 1;
}
</style>
<style scope>
.boxtop {
  position: relative;
  width: 90px;
  text-align: center;
}
.boxtop2 {
  width: 70px;
}
.currentyear {
  width: 50px !important;
  position: absolute;
  top: 0;
  left: 0;
}
.currentyear input {
  opacity: 0 !important;
}
.currentyear .el-input__icon {
  display: none;
}
.export {
  position: relative;
}
#file {
  position: absolute;
  left: 0;
  top:0;
  opacity: 0;
  cursor: pointer;
}
.flex {
  display: flex;
}
.week {
 margin: 0 20px;
}
.week dl {
  flex: 1;
  border-right: 1px solid #d5d5d1;
  border-top: 1px solid #d5d5d1;
  border-bottom: 1px solid #d5d5d1;
  margin-bottom: 5px;
  line-height: 1.5;
}
.week dl span {
  padding-right: 10px;
}
.week dl:first-child {
  border-left: 1px solid #d5d5d1;
  background: rgb(30,170,160);
  color: #fff;
}
.week dl:nth-child(7) {
  background: rgb(30,170,160);
  color: #fff;
}
.el-calendar__header {
  display: none;
}
.top {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: left;
  height: 50px;
  margin-left: 20px;
}
.top dd {
  display: inline-block;
  padding: 0 10px;
  line-height: 30px;
  margin-bottom: 0;
  font-size: 18px;
  color: rgb(30,170,160) ;
  font-weight: bold;
}
.width20 {
  width: 25px;
  display: inline-block;
}
.top .el-button {
  background: rgb(30,170,160);
  color: #fff;
  font-size: 16px;
  padding: 0px 10px;
  border:0;
  height: 25px;
  line-height: 25px;
}
.top .btn {
  font-size: 14px;
  margin-left: 18px;
}
.el-card__body, .el-main {
  padding: 10px 20px;
}
.addcont .btn {
  display: flex;
  margin-top: 10px;
}
.menu {
  position: absolute;
}
.menu .item {
  cursor: pointer;
  transition: .5s all ease;
}
.menu .item:hover {
  color: rgb(255,0,0);
}
.height100 {
  height: 100%;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 0; /* 超出几行省略 */
  text-align: left;
  overflow: hidden;

}

.current .height100 .item {
  color: rgb(30,170,160);
  color: #2c3e50;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 16px;
  line-height: 16px;
}
.height100 .item > div {
  outline: none;
}
.index .content, .copyright {
  display: flex;
  justify-content: space-between;
}
.copyright {
  padding: 10px 20px;
  font-size: 12px;
  line-height: 25px;
  color: rgb(30,170,160);;
}

.infolist {
  width: 340px;
}
.calend {
  width: calc(100% - 340px);
}
.calendar-day {
  text-align: left;
  position: relative;
  font-size: 12px;
}
.current .sunday .calendar-day {
  color: rgb(30,170,160);
}
.current .sunday .item {
   color: rgb(30,170,160);
}
.current .calendar-day.festival {
  color: rgb(255,0,0);
}
.calendar-day .rest {
  position: absolute;
  right: 0;
  top: 5px;
  background: rgba(255,0,0,.4);
  padding: 0 2px;
  line-height: 15px;
  color: #fff;
  border-radius: 3px;
}
.calendar-day .work {
  background: rgb(30,170,160,.4);
}
.current .calendar-day .rest {
  background: rgb(255,0,0);
}
.current .calendar-day .work {
  background: rgb(30,170,160);
}
.calendar-day .day1 {
  font-size: 18px;
}

.el-backtop, .el-calendar-table td.is-today{
  color: #2c3e50;
  font-weight:normal;
}
.is-today {
  color: auto;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
}

#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
  content: '当月';
}

.el-calendar__body {
  padding-top: 0;
  padding-bottom: 0;
}
.el-calendar-table {
  height: calc(100vh - 125px);
}

.el-calendar-table td.is-selected {
  background: none;
  outline: 1px solid #9a9996;
}
.el-calendar-table td.is-today {
  background: #d4e9e0;
  outline: 2px solid rgb(30,170,160);
}
.el-calendar-table td > div:hover {
  background: none !important;
}
.el-calendar-table td:hover {
  outline: 1px solid #a1a09c;
}
.el-calendar-table td,.el-calendar-table tr:first-child td,.el-calendar-table tr td:first-child {
  border-color: #d5d5d1;
}
.el-calendar-table thead {
  display: none;
}
.el-calendar-table thead th {
  border-color: #d5d5d1;
  border-right: 1px solid #d5d5d1;
  border-top: 1px solid #d5d5d1;
}
.el-calendar-table thead th:first-child {
  border-left: 1px solid #d5d5d1;
  background: rgb(30,170,160);
}
.el-calendar__header {
  border-bottom: 0;
}
</style>